﻿@{
    ViewBag.Title = "ShowWorkstationList";
    Layout = null;
}

<!DOCTYLE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>

    <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>

    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-form-item">
            <label class="layui-form-label">工作站编码</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="workstationCode"  lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
            </div>
            <label class="layui-form-label">工作站名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="workstationName" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
            </div>
            <label class="layui-form-label">所在车间名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <select name="workShopId" id="workShopCode" lay-verify="required" lay-search>
                    <option value="">请选择车间</option>
                </select>
            </div>
            <label class="layui-form-label">所属工序</label>
            <div class="layui-input-inline layui-input-wrap">
                <select name="processId" id="processCode" lay-verify="required" lay-search>
                    <option value="">请选择工序</option>
                </select>
            </div>

            <button type="button" id="Showdata" class="layui-btn">查询</button>
            <button type="reset" class="layui-btn">重置</button>
            <button type="button" class="layui-btn layui-btn-primary  layui-bg-blue" lay-on="layui-badge-dot">添加</button>
        </div>

        <table class="layui-hide" id="UntiInfoId" lay-filter="test">
        </table>
        <script type="text/html" id="toolDemo">
            <button type="button" class="layui-btn layui-bg-blue layui-btn-xs" lay-event="edit">编辑</button>
            <button type="button" class="layui-btn layui-bg-red layui-btn-xs" lay-event="delete">删除</button>
        </script>
    </form>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>

    <script>
        layui.use([ 'table'], function () {
            var table = layui.table;
            var form = layui.form;
            var measureName = layui.form.measureName;

            //显示
            ShowUnitInfo = function () {
                var workstationCode = $("#workstationCode").val();
                var workstationName = $("#workstationName").val();
                var workShopId = $("#workShopId").val();
                var processId = $("#processId").val();
                //执行一个 table 实例
                table.render({
                    elem: '#UntiInfoId'
                    , height: 520
                    , url: 'https://localhost:44311/api/app/workstation/workstation-lists'  //数据接口
                    , where: {
                        workstationCode: workstationCode,
                        workstationName: workstationName,
                        workShopId:workShopId||0,
                        processId: processId||0,
                    }
                    , title: '工作站表'
                    , page: true //开启分页
                    , limit: 10
                    , limits: [10, 20, 30, 40]
                    , cols: [[ //表头
                        { field: 'WorkstationCode', title: '工作站编码' }
                        , { field: 'WorkstationName', title: '工作站名称' }
                        , { field: 'Address', title: '工作站地点' }
                        , { field: 'WorkShopName', title: '所属车间名称'}
                        , { field: 'ProcessName', title: '所属工序' }
                        , { field: 'IsEnable', title: '是否启用', templet: function (row) {
                                return row.IsEnable == "1" ? "是" : "否"; } 
                           }
                        , { field: 'Remark', title: '备注' }
                        , { field: '', title: '操作', templet: "#toolDemo" }
                    ]]
                });
            }
            ShowUnitInfo();

            //查询
            $("#Showdata").on("click", function () {
                ShowUnitInfo();
            })

            //添加
            layui.use(function () {
                var $ = layui.$;
                var layer = layui.layer;
                var util = layui.util;
                var form = layui.form;
                util.on('lay-on', {
                    'layui-badge-dot': function () {
                        layer.open({
                            type: 2,
                            area: ['400px', '500px'],
                            resize: false,
                            shadeClose: true,
                            title: '添加工作站',
                            content: `https://localhost:44311/JzyViews/AddWorkstation`,
                            btn: ['确定', '取消'],
                            yes: function (index, layero) {
                                //获取表单数据
                                var data = layer.getChildFrame('body', index).find('form').serialize();
                                console.log(data);
                                $.ajax({
                                    url: "/JzyViews/AddWorkstations",
                                    type: "get",
                                    async: true,
                                    data: data,
                                    contentType: "application/json",
                                    success: res => {
                                        if (res != null) {
                                            var index = parent.layer.getFrameIndex(window.name);
                                            parent.layer.close(index);
                                            layer.closeAll();//关闭弹出层
                                            ShowUnitInfo();//刷新表格
                                        }
                                        else {
                                            alert("添加失败")
                                        }
                                    },
                                });
                                return false; // 阻止默认 form 跳转
                            },
                        });
                    }
                })
            });

            //表单操作
            table.on('tool(test)', function (obj) {
                //修改
                if (obj.event === 'edit') {
                    
                }
                //删除
                else if (obj.event === 'delete') {
                    var data = obj.data//获取当前数据
                        , layEvent = obj.event;//获取lay-event获取对应的值
                    layer.confirm('真的删除当前车间吗？', function (index) {
                        $.ajax({
                            url: "/JzyViews/DeleteWorkstations?id=" + data.Id,
                            type: "get",
                        });
                        alert("删除成功");
                        obj.del();
                        layer.close(index);
                    })
                }
            });

            //动态绑定车间
            $(document).ready(function () {
                $.ajax({
                    url: 'https://localhost:44311/api/app/workstation/work-shop',
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        var html = '';
                        $.each(data.data, function (i, item) {
                            html += '<option value="' + item.WorkShopCode + '">' + item.WorkShopName + '</option>';
                        });
                        $("#workShopId").append(html);
                        form.render('select');
                    }
                })
            })

            //动态绑定工序
            $(document).ready(function () {
                $.ajax({
                    url: 'https://localhost:44311/api/app/workstation/pro-process',
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        var html = '';
                        $.each(data.data, function (i, item) {
                            html += '<option value="' + item.ProcessCode + '">' + item.ProcessName + '</option>';
                        });
                        $("#processId").append(html);
                        form.render('select');
                    }
                })
            })

        });
    </script>

</body>
</html>